<template>
  <div id="panel">
    <!-- <el-card> -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="站点超标" name="103">
        <dmcb :yujingList="yujingList"></dmcb>
      </el-tab-pane>
      <el-tab-pane label="瞬时突变" name="104">
        <sstb></sstb>
      </el-tab-pane>
      <el-tab-pane label="站点离线" name="105">
        <zdlx></zdlx>
      </el-tab-pane>
      <el-tab-pane label="监测项超标" name="102">
        <jcxcb></jcxcb>
      </el-tab-pane>
      <el-tab-pane label="限值预警" name="101">
        <xzyj></xzyj>
      </el-tab-pane>
    </el-tabs>
    <!-- </el-card> -->
  </div>
</template>
<script>
import { getWarningType } from "@/api/waterWarningAnalysis";
export default {
  components: {
    dmcb: () => import("./panel/dmcb.vue"),
    sstb: () => import("./panel/sstb.vue"),
    zdlx: () => import("./panel/zdlx.vue"),
    jcxcb: () => import("./panel/jcxcb.vue"),
    xzyj: () => import("./panel/xzyj.vue"),
  },
  data() {
    return {
      activeName: "103",
      yujingList: [],
    };
  },
  created() {
    this.getWarningType();
  },
  methods: {
    getWarningType() {
      getWarningType().then((res) => {
        console.log(res);
        this.yujingList = res.data;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang="scss" scoped>
#panel {
  padding-bottom: 40px;
  min-height: calc(100% - 20px);
  margin: 10px;
  .el-card {
    margin: 10px;
  }
}
</style>
